<template>
  <section>


    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters" ref="formRef">
        <el-form-item label="审核状态">
          <el-select v-model="filters.state" placeholder="请选择审核状态">
            <!--店铺状态（1：待审核；3：待激活；2：正常；4：驳回）-->
            <el-option label="待审核" value="1"></el-option>
            <el-option label="待激活" value="3"></el-option>
            <el-option label="正常" value="2"></el-option>
            <el-option label="驳回" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button type="danger" @click="resetForm('formRef')">重置</el-button>
          <!--          <el-button type="primary" @click="addData">新增</el-button>-->
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="tableData"
              highlight-current-row
              @selection-change="selsChange"
              border
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60" label="序号">
      </el-table-column>
      <el-table-column prop="name" label="商家名称" width="120" sortable>
      </el-table-column>
      <el-table-column prop="logo" label="商家logo" width="190">
        <template slot-scope="scope">
          <img :src="scope.row.logo" alt="" style="width: 100px;height: 100px;border-radius: 50%;">
        </template>
      </el-table-column>
      <el-table-column prop="tel" label="商家电话" width="190">
      </el-table-column>
      <el-table-column prop="registerTime" label="注册时间" width="190">
      </el-table-column>
      <el-table-column prop="address" label="商家地址" width="190">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="150">
        <!-- 如果需要对表中某个字段进行显示内容的切换，则可以使用<template>语法进行转换 -->
        <template slot-scope="scope">
          <!--店铺状态（状态 店铺 1.待审核 ；2.审核通过待激活；3正常；4审核驳回（关闭）-->
          <el-tag size="mini" v-if="scope.row.state == 1" type="warn">待审核</el-tag>
          <el-tag size="mini" v-if="scope.row.state == 2" type="info">待激活</el-tag>
          <el-tag size="mini" v-if="scope.row.state == 3" type="success">正常</el-tag>
          <el-tag size="mini" v-if="scope.row.state == 4" type="danger">驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button size="small" @click="auditYes(scope.row)">审核通过</el-button>
          <el-button type="danger" size="small" @click="auditNo(scope.row)">审核驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--驳回弹框界面-->
    <el-dialog :title="titleValue" :visible.sync="dialogTableVisible">
      <el-form :model="shop" label-width="100px" :rules="formRules" ref="noForm">

        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="shop.name" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="驳回理由" prop="reason">
          <el-select v-model="shop.reason" placeholder="驳回理由">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核建议" prop="suggest">
          <el-input type="textarea" v-model="shop.suggest"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogTableVisible = false">取消</el-button>
        <el-button type="primary" @click.native="onSubmit">提交审核</el-button>
      </div>
    </el-dialog>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <!--
        @size-change：选择了每页条数 ，触发handleSizeChange方法
        @current-change：选择了第几页 ，触发handleCurrentChange方法
        :@current-change：把当前页绑定到  current 变量
        :page-size="size" ：每页显示的条数
        :layout  ：分页条布局
        :total="tableTotal" ：总条数
     -->
      <el-pagination
          style="float: right;margin: 20px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="filters.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="filters.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-col>
  </section>
</template>

<script>
import {batchRemoveUser} from "../../api/api";

export default {
  name: 'ShopCheck',
  data() {
    return {
      titleValue: '',
      filters: {
        keyword: '',
        current: 1, //默认第几页
        size: 10, //默认每页显示条数
      },
      options: [{
        value: '店铺名敏感',
        label: '店铺名敏感'
      }, {
        value: '店铺头像淫秽',
        label: '店铺头像淫秽'
      }, {
        value: '店铺经营范围不清晰',
        label: '店铺经营范围不清晰'
      }, {
        value: '店铺地址不清晰',
        label: '店铺地址不清晰'
      }, {
        value: '我不太高兴',
        label: '我不太高兴'
      }],
      value: '',
      tableData: [],
      optionDeptData: [], //下拉部门选项集合
      total: 0,//列表总数量
      dialogTableVisible: false, //表单弹框是否展示
      sels: [],//列表选中列数据
      formRules: { //表单校验规则
        name: []
      },
      shop: {
        id: '',
        suggest: '',
        reason: '',
        name: ''
      },//表单对象
    }
  },
  //定义所有的方法
  methods: {
    //点击复选框时触发
    selsChange(sels) {
      this.sels = sels;
    },
    //重置表单
    resetForm() {
      this.filters = {};
    },
    //审核通过
    auditYes(row) {
      this.$confirm('确定通过吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //向后台发请求
        this.$http.get("/shop/auditYes/" + row.id, null).then(res => {
          //刷新列表
          this.getTableData();
          //提示信息
          if (res.data.success) {
            this.$notify({
              title: '提示',
              message: res.data.msg,
              type: 'success'
            });
          } else {
            this.$notify({
              title: '提示',
              message: res.data.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          console.log(error);
        });
      }).catch(error => {
        console.log(error);
      });
    },
    //审核驳回
    auditNo(row) {
      this.titleValue = '店铺入驻审核驳回';
      //显示弹框
      this.dialogTableVisible = true;
      this.shop = Object.assign({name}, row);//属性拷贝
      console.log("2222222222222222222222222")
      console.log(this.shop.del)

    },
    //提交表单
    onSubmit() {
      let a = {id: this.shop.id, name: this.shop.name, reason: this.shop.reason, suggest: this.shop.suggest}
      console.log("33333333333")
      console.log(a)
      //id有值，做修改
      //发请求
      this.$http.post("/shop/auditNo", a).then(res => {
        console.log("11111111111111111111111111111111111111111")
        console.log(a)
        console.log(res)
        //隐藏弹框
        this.dialogTableVisible = false;
        //刷新列表
        this.getTableData();
        //提示信息
        if (res.data.success) {
          this.$notify({
            title: '提示',
            message: res.data.msg,
            type: 'success'
          });
        } else {
          this.$notify({
            title: '提示',
            message: res.data.msg,
            type: 'error'
          });
        }
      }).catch(error => {
        console.log(error);
      });

    },
    /*    //点击新增
        addData(){
          //显示弹框
          this.dialogTableVisible = true;
          this.titleValue = '新增店铺';
          //清空表单数据
          this.form = {};
        },*/
    /*    //删除
        auditNo(index, row){
          this.$confirm('确定删除此记录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //点击确定执行下面代码
            //发请求
            this.$http.delete("/dept/delete/" + row.id, null).then(res=>{
              this.getTableData();//刷新列表数据
              if(res.data.success){
                this.$notify({
                  title: '提示',
                  message: res.data.msg,
                  type: 'success'
                });
              }else{
                this.$notify({
                  title: '提示',
                  message: res.data.msg,
                  type: 'error'
                });
              }
            }).catch(error => {
              console.log(error);
            });
          }).catch(error => {
            console.log(error);
          });
        },*/
    //批量删除
    batchRemove() {
      //从sels中获取id值形成集合，传给后台做批量删除
      var ids = this.sels.map(item => item.id);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let param = {ids: ids};
        //发请求
        this.$http.post("/shop/batchDelete", param).then(res => {
          this.getTableData();//刷新列表数据
          if (res.data.success) {
            this.$notify({
              title: '提示',
              message: res.data.msg,
              type: 'success'
            });
          } else {
            this.$notify({
              title: '提示',
              message: res.data.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          console.log(error);
        });
      }).catch(error => {
        console.log(error);
      });
    },
    //获取列表数据
    getTableData() {
      //发请求
      this.$http.post("/shop/query", this.filters).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        }
      }).catch(error => {
        console.log(error);
      });
    },
    //选择每页条数时触发
    handleSizeChange(val) {
      console.log('选择了每页条数=' + val);
      this.filters.size = val;
      this.getTableData();
    },
    //翻页触发该函数
    handleCurrentChange(val) {
      console.log('翻页了=' + val);
      this.filters.current = val;
      this.getTableData();
    },
    //提供一个查询方法：查询部门表中所有的部门列表，然后给前端进行【上级部门的查询显示】
    // findAllShop(){
    //   this.$http.get('/shop/all').then(res=>{
    //     this.optionDeptData = res.data.data;
    //   }).catch(error => {
    //     console.log(error);
    //   });
    // }
  },
  //钩子函数：数据初始化
  mounted() {
    this.getTableData();
  }
}
</script>

<style scoped>
</style>